<template>
  <div class>
    <div class="staData">
      <ul class="head" v-if="flag==0">
        <li class="ranking">序号</li>
        <li class="names">工程项目</li>
        <li class="Spec">累计生产(方)</li>
        <li class="identifiers">合格(方)</li>
        <li class="room">合格率</li>
        <div class="man">不合格闭环率</div>
      </ul>
      <ul class="head" v-else-if="flag==1">
        <li class="ranking">序号</li>
        <li class="names">工程项目</li>
        <li class="Spec">累计生产(盘)</li>
        <li class="identifiers">合格(盘)</li>
        <li class="room">合格率</li>
        <div class="man">不合格闭环率</div>
      </ul>
      <vue-seamless-scroll v-if="data.length > 0" :data="data" :class-option="optionSetting" class="seamless-warp">
        <ul class="item">
          <li v-for="(item, i) in data" :key="i" :class="{ ons: (i + 1) % 2 == 0, offs: (i + 1) % 2 != 0 }">
            <span class="ranking" v-text="i + 1"></span>
            <span class="names">
              <a href="javascript:void(0);" :title="item.ProConName">{{ item.ProConName }}</a>
            </span>
            <span class="Spec" v-text="item.OutPutCount"></span>
            <span class="identifiers">
              <a href="javascript:void(0);" :title="item.QualiFiedCount">{{ item.QualiFiedCount }}</a>
            </span>
            <span class="room">{{item.PassRate}}%</span>
            <span class="man">{{item.UnClosedRate}}%</span>



          </li>
        </ul>
      </vue-seamless-scroll>
      <div class="defaultImg" v-else>
        <Default :sv="width"></Default>
      </div>
    </div>
  </div>
</template>
<script>
import Default from "@/components/default";

export default {
  props: ["commonData", "commonText"],
  data() {
    return {
      carouseId: 0,
      data: [
        {
          name: 'C15',
          AllNum: '200',
          PassNum: '190',
          NotPassNum: '10%',
          PassRatio: '95%',

        }, {
          name: 'C20',
          AllNum: '200',
          PassNum: '190',
          NotPassNum: '10%',
          PassRatio: '95%',

        }, {
          name: 'C25',
          AllNum: '200',
          PassNum: '190',
          NotPassNum: '10%',
          PassRatio: '95%',

        }, {
          name: 'C30',
          AllNum: '200',
          PassNum: '190',
          NotPassNum: '10%',
          PassRatio: '95%',

        }, {
          name: 'C35',
          AllNum: '200',
          PassNum: '190',
          NotPassNum: '10%',
          PassRatio: '95%',

        }, {
          name: 'C40',
          AllNum: '200',
          PassNum: '190',
          NotPassNum: '10%',
          PassRatio: '95%',

        }, {
          name: 'C45',
          AllNum: '200',
          PassNum: '190',
          NotPassNum: '10%',
          PassRatio: '95%',

        }, {
          name: 'C50',
          AllNum: '200',
          PassNum: '190',
          NotPassNum: '10%',
          PassRatio: '95%',

        }, {
          name: 'C55',
          AllNum: '200',
          PassNum: '190',
          NotPassNum: '10%',
          PassRatio: '95%',

        }, {
          name: 'C60',
          AllNum: '200',
          PassNum: '190',
          NotPassNum: '10%',
          PassRatio: '95%',

        }, {
          name: 'C65',
          AllNum: '200',
          PassNum: '190',
          NotPassNum: '10%',
          PassRatio: '95%',

        }
      ],
      width: "2rem",
      activeIndex: -1, //标识当前幻灯片索引
      n: 0,
      num: 0,
      c: 0,
      flag: 0,
      textArr: ["样品室", "水泥室", "力学室", "土工室"],
      //   data: ,
    };
  },
  components: {
    Default,
  },
  watch: {
    commonData: function (a, b) {
      this.getData();
    },
    commonText: {
      handler: function (a, b) {
        this.flag=a
      },
      deep: true
      // this.getData();
    },

  },
  computed: {
    optionSetting() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length

        hoverStop: true, // 是否开启鼠标悬停stop

        direction: 1, // 0向下 1向上 2向左 3向右

        openWatch: true, // 开启数据实时监控刷新dom

        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1

        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3

        waitTime: 100, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {

  },
  methods: {
    setActiveItem(index) {
      // console.log(index);
      this.$refs.carousel.setActiveItem(index);
    },
    // nums() {
    //   this.num = this.numText;
    // },
    aa() {
      // console.log(999);
    },
    change(pre, next) {
      this.c = pre;
      this.num = pre;
      // console.log(pre, next);
    },
    info(index) {
      //   console.log(123);
      //   console.log(index);
      // this.$emit("sonTate", 1);
      //   this.num = index;
      this.$refs.carousel.setActiveItem(index);
      //   this.change(1, 0)
    },
    getData() {
      //报告书 PassRatio
      this.data = this.commonData

    },
  },
};
</script>
<style lang="less" scope>
.staData {
  //   height: 50%;
  padding: 0rem 0.08rem 0.05rem;
  font-size: 0.12rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  // .homePage {
  //   display: flex;
  //   border: 1px solid green;
  //   z-index: 50;
  //   div {
  //     width: 40px;
  //     height: 30px;
  //     border: 1px solid red;
  //     margin: 10px;
  //     line-height: 30px;
  //     //   color: #fff;
  //   }
  // }
  .head {
    display: flex;
    background: #0a1f5c;
    // height: 0.35rem;
    height: 32px;
    padding: 0 0.07rem;
    margin: 0;
    color: rgba(133, 194, 255, 1);
    // border-bottom: 2px solid #21316e;
    // line-height: 0.35rem;
    font-size: 0.14rem;
    line-height: 30px;

    li {
      list-style: none;
    }

    .ranking {
      width: 8%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }

    .names {
      width: 35%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }

    .Spec {
      width: 18%;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .identifiers {
      width: 18%;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    // .surveieds {
    //   width: 15%;
    //   text-align: center;
    //   overflow: hidden;
    //   text-overflow: ellipsis;
    //   white-space: nowrap;
    // }
    .supply {
      width: 12%;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .man {
      width: 14%;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

    }

    .room {
      width: 13%;

      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    // .spen {
    //   width: 15%;

    //   text-align: center;
    //   overflow: hidden;
    //   text-overflow: ellipsis;
    //   white-space: nowrap;
    // }
  }

  .defaultImg {
    overflow: hidden;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .seamless-warp {
    overflow: hidden;
    flex: 1;
    color: #c9c9c9;
    // height: 2.4rem;
    height: 120px;

    ul {
      padding: 0;
      padding-bottom: 0.05rem;
      margin: 0;

      li {
        list-style: none;
        // height: 0.48rem;
        height: 32px;
        padding: 0 0.07rem;
        display: flex;
        // line-height: 0.5rem;
        line-height: 32px;

        // border-bottom: 1px solid #21316e;
        .ranking {
          display: inline-block;
          width: 8%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
        }

        .names {
          width: 35%;

          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;

          a {
            color: #c9c9c9;
            text-decoration: none;
          }
        }

        .Spec {
          display: inline-block;

          width: 18%;

          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .identifiers {
          display: inline-block;

          width: 18%;

          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          a {
            color: #c9c9c9;
            text-decoration: none;
          }
        }

        // .surveieds {
        //   width: 15%;

        //   text-align: center;
        //   display: inline-block;
        //   overflow: hidden;
        //   text-overflow: ellipsis;
        //   white-space: nowrap;
        // }
        .supply {
          width: 12%;

          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .man {
          width: 14%;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: rgba(221, 64, 125, 1);
        }

        .room {
          display: inline-block;

          width: 13%;

          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

        }

      }
    }
  }
}

.ons {
  background: rgba(0, 42, 130, 0.3);
  // background: pink;

  //   border: 1px solid blue;
}

.offs {
  background: transparent;

  //   border: 1px solid black;
}

a {
  color: #c9c9c9;
  text-decoration: none;
}
</style>
